<template>
  <div class="boxs">

    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-tabs>
        <el-tab-pane label="个人详情">

          <!-- 个人信息 -->
          <el-form ref="fm" :model="formData" :rules="rules" label-width="100px">
            <!-- 用户名 -->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="formData.username" />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 手机号 -> 不支持修改 -->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="手机号">
                  <el-input v-model="formData.mobile" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 入职时间 -->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="入职时间">
                  <el-date-picker v-model="formData.timeOfEntry" type="date" class="inputW" value-format="yyyy-MM-dd" />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 员工照片 -->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="员工头像">
                  <!-- 放置上传图片 -->
                  <!-- <el-image :src="require('@/assets/common/head.jpg')" /> -->
                  <UploadImg :staff-photo="formData.staffPhoto" @change-photo="changePhoto" />
                  <!--
                    .sync修饰符: 是个语法糖，同步修改父组件的数据
                    1. :父传子变量名.sync = "变量"
                    2. $emit('update:父传子变量名', newValue)
                    说明：vue3不支持sync修饰符了
                  -->
                  <!-- <UploadImg :staff-photo.sync="formData.staffPhoto" /> -->
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 保存个人信息 -->
            <el-row class="inline-info" type="flex" justify="center">
              <el-col :span="12">
                <el-button type="primary" @click="updateUser">保存更新</el-button>
                <el-button @click="$router.back()">返回</el-button>
              </el-col>
            </el-row>
          </el-form>

        </el-tab-pane>
      </el-tabs>
    </el-card>

  </div>
</template>

<script>
// 导入获取员工详情后台接口
import { getUserDetailByIdApi } from '@/api/user'
// 更新用户信息后台接口
import { saveUserDetailByIdApi } from '@/api/employees'

export default {
  data() {
    return {
      // 表单变量
      formData: {
        username: '',
        timeOfEntry: '',
        staffPhoto: '' // 头像
      },

      // 表单校验规则
      rules: {
        // 用户名
        username: [{ required: true, max: 10, message: '用户名必填！', trigger: 'change' }]
      }
    }
  },

  created() {
    // 获取员工的ID
    // params.参数名和动态路由的: 参数名一一对应
    // console.log(this.$route.params.id)
    this.getDetail()
  },

  methods: {
    // 修改头像地址
    changePhoto(newUrl) {
      // console.log('云图片地址：', newUrl)
      this.formData.staffPhoto = newUrl
    },
    // 点击更新员工信息
    updateUser() {
      this.$refs.fm.validate(async(isOk) => {
        if (isOk) {
          // 校验通过
          await saveUserDetailByIdApi(this.formData)
          this.$message.success('更新成功')

          // 更新vuex当前登录人信息
          // 说明：this.$store.state.user.userInfo.id 登录人id
          // 正在修改的员工ID=》如果相等，就需要执行更新
          if (this.$store.state.user.userInfo.id === this.formData.id) {
            this.$store.dispatch('user/getUserInfoAction')
          }
        }
      })
    },

    // 获取员工详情数据
    async getDetail() {
      const detail = await getUserDetailByIdApi(this.$route.params.id)
      // console.log('员工详情数据：', detail)

      // 回填数据
      // 说明❓：添加头像属性，避免响应问题
      // console.log(111, detail.staffPhoto)
      if (!detail.staffPhoto) {
        // 不存在情况下追加staffPhoto属性，避免响应式失效
        detail.staffPhoto = ''
      }
      this.formData = detail
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
